<template>
  <div class="shopcartContainer">
    <div class="title">
      <h2>购物车列表</h2>
    </div>
    <div class="listContainer" v-if="cartList.length">
      <!-- 表格上部 -->
      <div class="cartTableTop">
        <!-- 表头 -->
        <div class="cartTitle">
          <span class="name">商品信息</span>
          <span class="operation">操作</span>
          <span class="smtotal">小计</span>
          <span class="num">数量</span>
          <span class="onePrice">单价</span>
        </div>
        <!-- 表格列表 -->
        <div class="cartList">
          <div
            class="cartItem"
            v-for="(cartItem, index) in cartList"
            :key="cartItem.productId"
          >
            <div class="itemChoose">
              <input
                type="checkbox"
                :checked="cartItem.checked == 1"
                @click="changeOneChecked(cartItem)"
              />
            </div>
            <div class="itemImg">
              <img :src="cartItem.productImg" alt="" />
            </div>
            <div class="itemName">
              <span>{{ cartItem.productName }}</span>
            </div>
            <div class="opreation">
              <a
                href="javascript:;"
                class="itemDeleteBtn"
                @click="deleteOneCart(cartItem)"
              ></a>
            </div>
            <div class="itemPriceNum">
              <div class="smtotal">
                ￥{{ cartItem.productNum * cartItem.salePrice }}
              </div>
              <div class="itemAddDown">
                <a href="javascript:void(0)" @click="changeNum(cartItem, -1)"
                  >-</a
                >
                <input
                  type="text"
                  minnum="1"
                  :value="cartItem.productNum"
                  @click="
                    changeNum(
                      cartItem,
                      $event.target.value * 1 - cartItem.productNum
                    )
                  "
                />
                <a href="javascript:void(0)" @click="changeNum(cartItem, 1)"
                  >+</a
                >
              </div>
              <div class="onePrice">￥{{ cartItem.salePrice }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 表格底部 -->
      <div class="cartTableBottom">
        <div class="checkOperation">
          <div class="checkAll">
            <input type="checkbox" v-model="ischeckAll" />
            <span>全选</span>
          </div>
          <div class="delete">删除选中商品</div>
        </div>
        <div class="bottomRight">
          <div class="num">
            <h4>
              已选择 <i>{{ allCheckNum }}</i> 件商品
            </h4>
            <h5>
              共计 <i>{{ allNum }}</i> 件商品
            </h5>
          </div>
          <div class="totalPrice">
            <h4>
              应付总额：<i>￥ {{ allMoney }}</i>
            </h4>
            <h5>应付总额不含运费</h5>
          </div>
          <el-button type="primary" class="paybtn" @click="toOrderList()"
            >去结算</el-button
          >
        </div>
      </div>
    </div>
    <div class="none" v-else>
      <router-link to="/allcategory">购物车空了，去选购</router-link>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'ShopCart',
  data() {
    return {
      num: 1,
    }
  },
  mounted() {
    this.getCartList()
  },
  methods: {
    getCartList() {
      this.$store.dispatch('getCartList', '3144')
    },
    // 修改购物车数量
    async changeNum(cartItem, disnum) {
      if (disnum + cartItem.productNum < 1) {
        disnum = 1 - cartItem.productNum
      }
      try {
        await this.$store.dispatch('addOrUpdateShopCart', {
          productId: cartItem.productId,
          productNum: disnum + cartItem.productNum * 1,
        })

        this.getCartList()
      } catch (error) {
        alert(error.message)
      }
    },
    //修改单个购物车状态
    async changeOneChecked(cartItem) {
      // const { productId, checked } = cartItem
      let productId = cartItem.productId
      let checked = cartItem.checked === '1' ? '0' : '1'
      try {
        await this.$store.dispatch('changeChecked', { productId, checked })
        this.getCartList()
      } catch (error) {
        alert('修改购物车状态失败')
      }
    },

    //删除单个购物车
    async deleteOneCart(cartItem) {
      const { productId } = cartItem
      console.log(productId)
      try {
        await this.$store.dispatch('deleteOneCart', productId)
        this.getCartList()
      } catch (error) {
        alert('删除单个购物车失败')
      }
    },
    //修改单个购物车状态
    async changeOneChecked(cartItem) {
      // const { productId, checked } = cartItem
      let productId = cartItem.productId
      let checked = cartItem.checked === '1' ? '0' : '1'
      try {
        await this.$store.dispatch('changeChecked', { productId, checked })
        this.getCartList()
      } catch (error) {
        alert('修改购物车状态失败')
      }
    },
    //删除单个购物车
    async deleteOneCart(cartItem) {
      const { productId } = cartItem
      console.log(productId)
      try {
        await this.$store.dispatch('deleteOneCart', productId)
        this.getCartList()
      } catch (error) {
        // alert('删除单个购物车失败')
        console.log(error.message)
      }
    },
    //去结算
    toOrderList() {
      let productIds = []
      this.cartList.forEach((item) => {
        if (item.checked === '1') {
          productIds.push(item.productId)
        }
      })
      console.log(productIds)
    },
  },
  computed: {
    ...mapState({
      cartList: (state) => state.shopcart.cartList,
    }),
    ...mapGetters(['allMoney', 'allNum', 'allCheckNum']),

    ischeckAll: {
      get() {
        return (
          this.cartList.every((item) => item.checked === '1') &&
          this.cartList.length > 0
        )
      },
      async set(val) {
        let checked = val ? '1' : '0'
        this.cartList.forEach((item) => {
          if (item.checked !== checked) {
            item.checked = checked
          }
        })
        // console.log(productIds)
        try {
          await this.$store.dispatch('changeAllChecked', checked)
          this.getCartList()
        } catch (error) {
          alert('全选全不选状态修改失败')
        }
      },
    },
  },
}
</script>

<style lang="less" scoped>
.shopcartContainer {
  width: 1220px;
  margin: 0 auto;
  border-radius: 10px;
  // background-color: chocolate;
  .title {
    padding-left: 30px;
    position: relative;
    z-index: 10;
    height: 60px;
    padding: 0 10px 0 24px;
    border-bottom: 1px solid #d4d4d4;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 1px 7px rgb(0 0 0 / 6%);
    background: #f3f3f3;
    background: linear-gradient(#fbfbfb, #ececec);
    line-height: 60px;
    font-size: 18px;
    color: #333;
  }
  /* 表格 */
  .listContainer {
    /* 表格上 */
    .cartTableTop {
      /* 表头 */
      .cartTitle {
        position: relative;
        z-index: 1;
        line-height: 38px;
        height: 38px;
        padding: 0 0 0 30px;
        font-size: 12px;
        background: #eee;
        border-bottom: 1px solid #dbdbdb;
        border-bottom-color: rgba(0, 0, 0, 0.08);
        .name {
          float: left;
          text-align: left;
        }
        span {
          width: 137px;
          float: right;
          text-align: center;
          color: #838383;
        }
      }
      /* 表格列表 */
      .cartList {
        background-color: #fff;
        .cartItem {
          position: relative;
          height: 140px;
          margin-left: 74px;

          > div {
            float: left;
            &.itemChoose {
              position: absolute;
              left: -74px;
              top: 0;
              width: 74px;
              height: 20px;
              padding: 60px 0 0 31px;
              font-size: 12px;
              color: #999;
            }
            &.itemImg {
              position: relative;
              margin-top: 30px;
              overflow: hidden;
              width: 80px;
              height: 80px;
              img {
                width: 80px;
                height: 80px;
              }
            }
            &.itemName {
              width: 300px;
              margin-left: 20px;
              color: #323232;
              text-align: center;
              line-height: 20px;
              margin-top: 40px;
              span {
                white-space: pre-wrap;
              }
            }
            &.itemPriceNum {
              float: right;
              overflow: hidden;
              > div {
                float: right;
                width: 100px;
                text-align: center;
                line-height: 90px;
                padding: 0 20px;
                display: flex;
                align-items: center;
              }
              .itemAddDown {
                > input {
                  display: block;
                  width: 30px;
                  height: 20px;
                  background-color: #fff;
                  line-height: 40px;
                  font-size: 14px;
                  padding: 0;
                  color: #666;
                  border: 1px solid #ededed;
                  border-radius: 10px;
                  outline: none;
                  text-align: center;
                  margin-top: 30px;
                }
                > a {
                  display: block;
                  width: 20px;
                  height: 20px;
                  line-height: 20px;
                  border-radius: 50%;
                  border: 3px solid #ededed;
                  margin: 40px 0 10px;
                  padding-right: -10px;
                  text-align: center;
                }
              }
            }
            &.opreation {
              overflow: hidden;
              float: right;
              width: 100px;
              text-align: center;
              color: #666;
              line-height: 100px;
              vertical-align: middle;
              a {
                display: block;
                width: 24px;
                height: 24px;
                margin: 30px 20px;
                color: #c2c2c2;
                background: url();
                background-size: 100% auto;
              }
            }
          }
        }
      }
    }
    /* 表格底部 */
    .cartTableBottom {
      height: 90px;
      width: 100%;
      background-position: 50%;
      background: #fdfdfd;
      background: linear-gradient(#fdfdfd, #f9f9f9);
      border-top: 1px solid #e9e9e9;
      box-shadow: 0 -3px 8px rgb(0 0 0 / 4%);
      /* 全选 */
      .checkOperation {
        float: left;
        padding: 35px 26px;
        font-size: 12px;
        overflow: hidden;
        > div {
          float: left;
          &.checkAll {
            margin-right: 40px;
            input {
              margin-right: 4px;
            }
          }
          &.delete {
            height: 20px;
            line-height: 20px;
            cursor: pointer;
            width: 80px;
            text-align: center;
            border-radius: 5px;
            background-color: #d64321;
            color: #fff;
          }
        }
      }
      .bottomRight {
        float: right;
        overflow: hidden;
        > div {
          float: left;
          width: 160px;
          height: 40px;
          margin-top: 30px;
          > h4 {
            font-size: 16px;
            i {
              color: #d56781;
            }
          }
          &.num {
            float: left;
            width: 160px;
            height: 40px;
            text-align: right;
            padding-right: 20px;
          }
          &.totalPrice {
            text-align: left;
            padding-left: 20px;
            border-left: 2px solid #ededed;
          }
        }
        .paybtn {
          margin: 20px 20px 0 0;
        }
      }
    }
  }
  /* 空 */
  .none {
    padding: 50px;
    font-size: 40px;
  }
}
</style>
